<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="css/mui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 44px;
            padding: 0 15px;
            background: #1a81d3;
            line-height: 44px;
        }
        .header img{
            width: 19px;
            height: 16px;
        }
        .header h3{
            font-size: 14px;
            color: #fff;
            letter-spacing: 1px;
            font-weight: normal;
        }
        .qrcode-pic{
            position: relative;
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        .qrcode-pic img{
            position: absolute;
            top: 0;
            z-index: 3;
        }
        .qrcode-cont h3{
            margin-top: 30px;
            text-align: center;
            font-size: 28px;
            font-weight: 400;
        }
        .qrcode-cont h5{
            margin-top: 5px;
            text-align: center;
            font-family: "微软雅黑";
            font-size: 12px;
            color: #00d71a;
        }
        .qrcode-btn{
            display: flex;
            flex-direction: column;
            padding: 0 40px;
            margin-top: 20px;
        }
        .qrcode-btn a{
            margin-bottom: 20px;
            padding: 7px 0;
            background: #418bca;
            border: none;
            outline: none;
            color: #fff;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="header">
        <img src="images/back.png" onclick="window.location='user_charge.html'">
        <h3>二维码支付</h3>
        <a></a>
    </header>
    <div class="qrcode-cont">
        <h3>￥<span></span></h3>
        <div class="qrcode-pic">
            <img src="" id="save-img">
        </div>
        <h5>长按二维码保存至相册</h5>
        <h5>二维码15分钟内有效，请尽快支付</h5>
        <h5>请使用手机QQ、UC等主流浏览器</h5>
        <div class="qrcode-btn">
            <a @click="wx()" href="weixin://">微信支付：打开微信，扫一扫相册二维码</a>
            <a href="user_history.html">查看成功充值的记录</a>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/jquery.qrcode.min.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data:{
            QRCODE: ''
        },
        created:function(){
            var that = this
            var QRCODE = sessionStorage.getItem('QRCODE')
            that.QRCODE = QRCODE
        },
        methods:{
            wx:function(){
                if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
                    mui.alert('请手动打开微信', '', function(){ })
                } else {
                    window.location.href = 'weixin://';
                }
            }
        }
    })
    $('.qrcode-cont h3 span').text(sessionStorage.getItem('MONEY'))
    var QRCODE = sessionStorage.getItem('QRCODE')
    $('.qrcode-pic').qrcode({
        width: 180,
        height: 180,
        text: QRCODE
    });
    setImg();
    function setImg(){
        var oCanves = $('.qrcode-pic canvas')[0]
        var strDataURL = oCanves.toDataURL('image/png')
        $('#save-a').attr('href',strDataURL)
        $('#save-img').attr('src',strDataURL)
    }
</script>
</html>
